<template>
  <div style="padding: 12px 10px">
    <div>
      <div class="header flex">
        <el-input
          class="input"
          clearable
          v-model="contractName"
          placeholder="合同名称"
        ></el-input>
        <el-button @click="cha()">查询</el-button>
        <el-button @click="clear()">重置</el-button>
        <el-button @click="handleDelete()">删除</el-button>
        <!-- 弹框  新增-->
        <el-popover placement="top" width="560" v-model="visible">
          <p>
            <!-- 弹出框的内容 -->
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="合同名称" prop="contractName">
                <el-input v-model="ruleForm.contractName"></el-input>
              </el-form-item>
              <el-form-item label="合同甲方" prop="partyA">
                <el-input v-model="ruleForm.partyA"></el-input>
              </el-form-item>
              <el-form-item label="合同乙方" prop="partyB">
                <el-input v-model="ruleForm.partyB"></el-input>
              </el-form-item>
              <el-form-item label="合同金额" prop="amount">
                <el-input v-model="ruleForm.amount"></el-input>
              </el-form-item>

              <el-form-item label="签订时间" prop="date">
                <el-date-picker
                  v-model="ruleForm.date"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleForm)"
                  >立即创建</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="visible = false"
              >确定</el-button
            >
          </div>
          <!-- 新增按钮 -->
          <el-button type="primary" slot="reference">新增</el-button>
        </el-popover>
      </div>
      <!-- 下面表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <!-- 点击按钮 -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- 需求人数 -->
        <el-table-column label="合同名称" width="170">
          <template slot-scope="scope">{{ scope.row.contractName }}</template>
        </el-table-column>
        <el-table-column
          prop="partyA"
          label="合同甲方"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="partyB"
          label="合同乙方"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="合同金额" width="200">
          <template slot-scope="scope">{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="签订时间"
          width="200"
        ></el-table-column>

        <el-table-column width="200" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <!-- <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改内容 -->
    <el-dialog title="修改合同档案" :visible.sync="dialogVisible2" width="50%">
      <!-- 表单 -->
      <el-form
        :model="form2"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="合同名称" prop="contractName">
          <el-input v-model="form2.contractName"></el-input>
        </el-form-item>
        <el-form-item label="合作甲方" prop="partyA">
          <el-input v-model="form2.partyA"></el-input>
        </el-form-item>
        <el-form-item label="合作乙方" prop="partyB">
          <el-input v-model="form2.partyB"></el-input>
        </el-form-item>
        <el-form-item label="合同金额" prop="amount">
          <el-input v-model="form2.amount"></el-input>
        </el-form-item>
        <el-form-item label="签订日期" prop="date">
          <el-date-picker
            v-model="form2.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="handleClose2(form2)">确 定</el-button>
      </span>
    </el-dialog>
    <Pagin :count="total" @pageEvent="fetchData" :pageSize="pageSize"></Pagin>
  </div>
</template>

<script>
import {
  InterInfo,
  Addmians,
  gaiListAPI,
  DeleteAPI,
  souchaListApi

} from "@/api/4-2_contract";
export default {
  data() {
    return {
      dialogVisible2: false,
      value: "",
      options: [],
      form2: {},
      contractName: "", //查询 合同名称 销售合同

      ruleForm: {
        contractName: "",
        partyA: "",
        partyB: "",
        amount: "",
        createDate: "",
      },
      total: 0, // 列表总行数
      pageSize: 10,
      currentPage: 1,
      rules: {},
      visible: false,
      tableData: [],
      dataList: [],
      multipleSelection: [],
    };
  },
  created() {
    this.inits(); 
  },
  components: {
    Pagin: () => import("c/Pagin"),
  },
  mounted() {},
  methods: {
    // 修改的弹框
    handleEdit(index, row) {
      this.dialogVisible2 = true;
      this.form2 = row;
      console.log(index, row);
    },
    // 修改内容
    async handleClose2() {
      const res = await gaiListAPI({
        contractName: this.form2.contractName,
        partyA: this.form2.partyA,
        partyB: this.form2.partyB,
        amount: this.form2.amount,
        date: this.form2.date,
      });
      if (res.code == "1") {
        this.$message.success("修改成功");
      }
      this.dialogVisible2 = false;
    },
    //删除
    async handleDelete() {
      // const res = await DeleteAPI(row.id);
      // console.log(res);
      // this.dataList.splice(index, 1);
      // this.fetchData(this.currentPage);
      // this.total = this.dataList.length;
      // this.$message.success("删除成功");
       // 全选
       var id = [];
      this.multipleSelection.forEach((item) => {
        id.push(item.id);
      });
      if (id.length > 0) {
        const res = await DeleteAPI(id);
        if (res.code == "1") {
          this.inits();
          this.$message.success("删除成功");
        }
      }
    },
    // 请求数据渲染页面
    async inits() {
      var res = await InterInfo();
      this.dataList = res.data;
      this.total = this.dataList.length;
      this.fetchData(this.currentPage);
    },
    //分页
    fetchData(count) {
      var list = this.dataList;
      var from = (count - 1) * this.pageSize;
      const to = count * this.pageSize;
      this.tableData = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from]);
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 面试官
    // async guans() {
    //   var r = await chaListApi();
    //   r.name.map((item, i) => {
    //     item.value = item.name;
    //   });
    //   this.options = r.name;
    //   console.log("面试官", r.name);
    //   console.log("数组", this.options);
    // },
    // 添加数据
    async submitForm(form) {
      console.log(form);

      var res = await Addmians({
        contractName: form.contractName,
        partyA: form.partyA,
        partyB: form.partyB,
        amount: form.amount,
        date: form.date,
      });
      if (res.code == "1") {
        var obj = {
          contractName: form.contractName,
          partyA: form.partyA,
          partyB: form.partyB,
          amount: form.amount,
          date: form.date,
        };
        this.dataList.unshift(obj);
        console.log(this.dataList, "k");
        this.fetchData(this.currentPage);
        this.total = this.dataList.length;
        this.$message.success("添加成功");
        this.visible = false;
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 查询
    async cha() {
      var res = await souchaListApi( {contractName:this.contractName});
      var cartInfo = [];
      if (res.code == "1") {
        res.data.map((item, i) => {
          console.log(item, i);
          if (item.contractName == this.contractName ) {
            // return item
            cartInfo.push(item);
          }
        });
        console.log("查询", res);
        //   this.dataList = res.data;
        this.dataList = cartInfo;
        this.total = this.dataList.length;
        this.fetchData(this.currentPage);
        // alert('查询成功')
        // this.inits()
        this.$message.success('查询成功')
      } else {
        this.$message.success('查询失败')
      }
    },
    clear() {
      this.name = "";
      this.phone = "";
      this.inits();
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input {
  width: 250px;
}
.header {
  width: 35%;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
}
</style>
